<template>
  <!-- 新建方案 -->
  <div class="scheme-model">
    <el-dialog width="30%" v-model="dialogVisible" :before-close="handleClose">
      <template #header>
        <div class="my-header">
          <div>新建方案</div>
        </div>
      </template>
      <div class="scheme-box">
        <el-form
          ref="ruleFormRef"
          :model="basicForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="验证方案" prop="scName">
            <el-input class="formwidth" placeholder="验证方案名称" v-model="basicForm.scName" />
          </el-form-item>
          <el-form-item label="模型参数" prop="pmid">
            <el-select v-model="basicForm.pmid" placeholder="模型参数">
              <el-option
                :label="item.scName"
                :value="item.id"
                v-for="item in paramsOptions"
                :key="item.id"
              />
            </el-select>
            <span class="link-tag" @click="lookConfig">查看参数详情</span>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">确定</el-button>
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 参数查看弹窗 -->
    <ConfigParagm
      :dialogVisible="showDialog"
      @closeDialog="closeDig"
      :paramsDetail="paramsDetail"
      :disableForm="state.disableForm"
    />
  </div>
</template>

<script setup>
import { ref, reactive, defineExpose, defineEmits } from 'vue'
import ConfigParagm from '../configParagm/index.vue'
import { ElMessage } from 'element-plus'
import {
  // 获取对应模型的模型参数
  getXajParamSchemes,
  // 查看参数详情
  getXajParamsDetail,
  // 时空变源参数方案下拉框绑定
  getSkbyParamSchemes,

  // 新安江添加验证方案
  postXajAdd,
  // 时空变源添加验证方案
  postSkbyAdd
} from '@/services/modules/model-config'
const props = defineProps({
  watershedId: {
    type: Number,
    default: 1
  },
  // 模型信息
  modelObj: {
    type: Object,
    default: () => {}
  }
})

//查看参数详情
let paramsDetail = ref({})
let showDialog = ref(false)
const paramsId = ref(0)
const ruleFormRef = ref(null)
const paramsOptions = ref([])
const dialogVisible = ref(false)
//
let basicForm = reactive({
  // 新建方案名称
  scName: '',
  // 预报断面编码
  blkcd: '',
  // 参数编号
  pmid: '',
  // 模型编号
  mid: props.modelObj.id
})
// 控制查看参数弹框
const state = reactive({ disableForm: false })

// 关闭查看参数弹框,刷新父组件方案列表
const emit = defineEmits(['closeDialog', 'refresh'])
const closeDialog = () => {
  emit('closeDialog', false)
}
// 刷新父组件方案列表
const closeRefresh1 = () => {
  emit('refresh')
}
// 关闭参数查看弹框的回调
const closeDig = (v) => {
  showDialog.value = v
}
//验证
const rules = {
  scName: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
  pmid: [
    {
      required: true,
      message: '请选择模型参数',
      trigger: 'change'
    }
  ]
}
//获取对应模型的模型参数
function paramSchemes(blkcd) {
  // 新安江
  if (props.modelObj.id == 2) {
    getXajParamSchemes({
      blkcd: blkcd,
      // mid: 2 //todo
      mid: props.modelObj.id //todo
    }).then((res) => {
      if (res.code === 200) {
        paramsOptions.value = res.data
        // paramsId.value = res.data[0].id
        // handleClickUnit(0)
      }
    })
  } else if (props.modelObj.id == 1) {
    // 时空变源
    getSkbyParamSchemes({
      blkcd: blkcd
    }).then((res) => {
      if (res.code === 200) {
        res.data.forEach((e) => {
          e.name = e.scName
        })
        paramsOptions.value = res.data
        // paramsId.value = res.data[0].id
        // handleClickUnit(0)
      }
    })
  }
}
// 查看参数详情
const lookConfig = (e) => {
  getXajParamsDetail({
    scid: basicForm.pmid
  }).then((res) => {
    if (res.code === 200) {
      paramsDetail.value = res.data
      if (res.data) {
        showDialog.value = true
        // 查看参数详情时 将表单禁用
        state.disableForm = true
      }
    }
  })
}
//保存新建方案
function handleSave() {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      if (props.modelObj.id == 2) {
        postXajAdd(basicForm).then((res) => {
          if (res.code == 200) {
            ElMessage.success('新安江新增方案成功')
            // 刷新父组件方案列表
            closeRefresh1()
            // 关闭新建方案弹框
            handleClose()
          }
        })
        // 为新安江新建方案
      } else if (props.modelObj.id == 1) {
        // 为时空变源新建方案

        postSkbyAdd(basicForm).then((res) => {
          if (res.code == 200) {
            ;` ElMessage.success('时空变源新增方案成功')`
            // 刷新父组件方案列表
            closeRefresh1()
            // 关闭新建方案弹框
            handleClose()
          }
        })
      }
      // addForm.startSec = addForm.startSec.join(',')
      // addForm.zoneId = props.watershedId
      // addArea(addForm).then((res) => {
      //   if (res.code === 200) {
      //     handleClose()
      //     closeDialog()
      //   }
      // })
    } else {
      return
    }
  })
}

// 接收参数并 显示新建方案弹框
function handleOpenModal(value) {
  dialogVisible.value = true
  paramSchemes(value.blkcd)
  // 获取预报断面编码
  basicForm.blkcd = value.blkcd
}
defineExpose({ handleOpenModal })
// 关闭新建方案弹框
function handleClose() {
  dialogVisible.value = false
  ruleFormRef.value.resetFields()
}
</script>

<style lang="less" scoped>
.scheme-model {
  .my-header {
    height: 35px;
    border-bottom: 2px solid #eee;
  }
  .link-tag {
    color: #0054db;
    text-decoration: underline;
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
